<template>
  <view
    class="roc-file t-toptips"
    :style="{ top: top, background: cubgColor }"
    :class="[show ? 't-top-show' : '']"
  >
    <view v-if="loading" class="flex flex-sub">
      <view class="cu-progress flex-sub round striped active sm">
        <view :style="{ background: color, width: value + '%' }"></view>
      </view>
      <text class="margin-left">{{ value }}%</text>
    </view>
    <block v-else>{{ msg }}</block>
  </view>
</template>

<script>
export default {
  props: {
    top: {
      type: String,
      default: 'auto',
    },
    bgColor: {
      type: String,
      default: 'rgba(49, 126, 243, 0.5)',
    },
    color: {
      type: String,
      default: '#e54d42',
    },
  },
  data() {
    return {
      cubgColor: '',
      loading: false,
      value: 5,
      show: false,
      msg: '执行完毕~',
    }
  },
  methods: {
    toast(title = '', { duration = 2000, icon = 'none' } = {}) {
      uni.showToast({ title, duration, icon })
    },
    getRequest(url) {
      let theRequest = new Object()
      let index = url.indexOf('?')
      if (index != -1) {
        let str = url.substring(index + 1)
        let strs = str.split('&')
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
        }
      }
      return theRequest
    },
    /*
				上传说明：
				currentWebview: 当前窗口webview对象
				url：上传接口地址
				name：上传文件key值
				header: 上传接口请求头
				...：body内其他参数
			*/
    appChooseFile({ currentWebview, url, name = 'file', header, ...formData } = {}) {
      let wv = plus.webview.create(
        '',
        '../hybrid/html/index.html',
        {
          'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
          top: 0,
          height: '100%',
          background: 'transparent',
        },
        {
          url,
          header,
          formData,
          key: name,
        }
      )
      wv.loadURL('../hybrid/html/index.html')
      currentWebview.append(wv)
      wv.overrideUrlLoading({ mode: 'reject' }, e => {
        let { fileName, id } = this.getRequest(e.url)
        fileName = unescape(fileName)
        id = unescape(id)
        return this.onCommit(this.$emit('up-success', { fileName, data: id }))
      })
    },
    /* 
			上传
			*/
    upload(param = {}) {
      if (!param.url) {
        this.toast('上传地址不正确')
        return
      }
      if (this.loading) {
        this.toast('还有个文件玩命处理中，请稍候..')
        return
      }
      return this.appChooseFile(param)
    },
    onCommit(resolve) {
      this.msg = '执行完毕~'
      this.loading = false
      this.cubgColor = 'rgba(57, 181, 74, 0.5)'
      setTimeout(() => {
        this.show = false
      }, 1500)
      return resolve
    },
    setdefUI() {
      this.cubgColor = this.bgColor
      this.value = 0
      this.loading = true
      this.show = true
    },
    upErr(errText) {
      this.$emit('up-error', errText)
    },
    errorHandler(errText, reject) {
      this.msg = errText
      this.loading = false
      this.cubgColor = 'rgba(229, 77, 66, 0.5)'
      setTimeout(() => {
        this.show = false
      }, 1500)
      return reject(errText)
    },
  },
}
</script>

<style lang="scss" scoped>
.t-toptips {
  width: 100%;
  padding: 18upx 30upx;
  box-sizing: border-box;
  position: fixed;
  z-index: 90;
  color: #fff;
  font-size: 30upx;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  opacity: 0;
  transform: translateZ(0) translateY(-100%);
  transition: all 0.3s ease-in-out;
}

.t-top-show {
  transform: translateZ(0) translateY(0);
  opacity: 1;
}
</style>
